<template>
  <div class="box">
    <h1>我的Vue项目</h1>
    <p>年龄是：{{ age }}</p>
    <button @click="age++">age+1</button>
    <div class="main">
      <Left v-if="flag"></Left>
      <Right></Right>
    </div>
  </div>
</template>

<script>
// 导入Left、Right组件，并注册

import Left from './components/Left.vue'
import Right from './components/Right.vue'

export default {
  data() {
    return {
      username: 'zs',
      age: 20,
      flag: true
    }
  },

  // beforeCreate - 此时data数据和methods等等，都没有初始化呢，都用不了
  beforeCreate() {
    console.log('beforeCreate -- ', this.age)
  },

  // created - data、methods等等都已经初始化完毕。但是页面还没有渲染，不能使用DOM元素
  // 这个周期函数很重要，经常在此发送ajax请求
  created() {
    let h1 = document.querySelector('h1')
    console.log('created -- ', this.age, h1)
  },

  // 开始组织DOM结构，并将数据处理到DOM结构中
  // 开始准备将DOM结构渲染到页面中
  beforeMount() {
    console.log('beforeMount -- 即将要渲染页面了')
  },

  // mounted，重要阶段。此时表示页面已经渲染完毕。此时可以找页面元素进行操作了
  mounted() {
    let h1 = document.querySelector('h1')
    console.log('mounted -- 此时可以找页面元素了', h1)
  },

  // beforeUpdate -- data数据改变后，页面更新之前，会触发 beforeUpdate
  beforeUpdate() {
    let r = document.querySelector('p').innerText
    console.log('beforeUpdate -- ', this.age, r)
  },

  // updated -- 表示data数据和页面都已经更新完毕了
  updated() {
    let r = document.querySelector('p').innerText
    console.log('updated -- ', this.age, r)
  },

  // 注册组件
  components: {
    Left: Left,
    Right: Right
  }
}
</script>

<style lang="less" scoped>
.box {
  background-color: cornflowerblue;
  padding: 20px;
  .main {
    display: flex;
    > div {
      flex: 1;
      min-height: 300px;
      margin: 10px;
      padding: 10px;
    }
  }
}
</style>
